<template>
  <div class="qaBox">
    <el-row style="width: 100%; height: 100%" class="boxShadow">
      <el-row style="margin-bottom: 10px" type="flex" justify="start">
        <el-col :span="12">
          <el-button type="primary" icon="el-icon-plus" @click="addHandler">
            新增</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :data="renderData"
          @selection-change="handleSelectionChange"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#606266', color: '#fff' }"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
          />
          <el-table-column
            prop="name"
            label="任务类型"
            min-width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            min-width="120"
          >
          </el-table-column>

          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="editHandler(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                style="color: red"
                @click="deleteTypeApi({ id: scope.row.id })"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
      <el-dialog
        :title="editTitle"
        :visible.sync="editShow"
        width="30%"
        append-to-body
        :destroy-on-close="false"
        :modal="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form :model="editForm">
          <el-form-item label="任务名称：" label-width="90px">
            <el-input v-model="editForm.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="备注：" label-width="90px">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入备注"
              v-model="editForm.remark"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editShow = false">取 消</el-button>
          <el-button type="primary" @click="saveHandler">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import {
  getTypeList,
  editType,
  addType,
  deleteType,
} from "../../http/officeTaskMg/officeTaskMg.js";
export default {
  data() {
    return {
      editTitle: "新增类型",
      status: null,
      name: "",
      startDate: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      isSearch: false,
      editShow: false,
      editForm: {
        name: null,
        remark: "",
      },
      renderData: [],
    };
  },

  mounted() {
    this.getTypeListApi();
  },

  methods: {
    searchHandler() {
      this.isSearch = true;
      this.getTypeListApi();
    },

    handleSelectionChange(v) {
      console.log("v::: ", v);
    },

    handleCurrentChange(v) {
      this.pageNum = v;
    },

    handleSizeChange(v) {
      this.pageSize = v;
    },

    addHandler() {
      this.editTitle = "新增类型";
      this.editShow = true;
    },

    editHandler(row) {
      this.editTitle = "编辑类型";
      this.editForm = row;
      this.editShow = true;
    },

    saveHandler() {
      if (this.editForm.name == "" || this.editForm.remark == "") {
        this.$message.error("请填写完整");
      } else {
        if (this.editTitle == "新增类型") {
          this.addTypeApi(this.editForm);
        } else {
          this.editTypeApi(this.editForm);
        }
      }
    },

    getTypeListApi() {
      let serchFrom = { type: 1 };
      getTypeList(serchFrom).then((res) => {
        console.log(this.name);
        if (res.code == 200) {
          console.log("res::: ", res);
          this.renderData = res.data;
          this.total = res.data.length;
        }
      });
    },

    editTypeApi(params) {
      editType(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("编辑成功");
          this.editShow = false;
          this.getTypeListApi();
        } else {
          this.$message.error(res.message);
        }
      });
    },

    addTypeApi(params) {
      addType(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("新增成功");
          this.editShow = false;
          this.getTypeListApi();
        } else {
          this.$message.error(res.message);
        }
      });
    },

    deleteTypeApi(params) {
      this.$confirm("此操作将永久删除该条任务类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteType(params).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getTypeListApi();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.qaBox {
  width: 100%;
  height: 100%;
  .boxShadow {
    box-shadow: 1px 1px 10px rgb(184, 184, 184);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 8px 8rem;
  }
}
</style>
